import React, { Component } from "react";
import { NavBar, Carousel, Flex } from "antd-mobile";
// 样式
import "./index.scss";
// axios
import myAxios from "../../utils/myAxios";
// search
import Search from "../search/Search"
import {withRouter} from "react-router-dom"
import Lead_list from '../lead_navs/index'
class Index extends Component {
  state = {
    data: [],
    imgHeight: 170,
    catitems: [],
  };
  // 点击轮播图中的图片，跳转到商品详情页
  carouselClick=(goods_id) => {
      this.props.history.push("/goodsDetail/"+goods_id)
  }
  
  // 点击导航图片，跳转到分类页面
  catitemsClick=(params) => {
    this.props.history.push("/category"); 
  }
  
  componentDidMount() {
    myAxios.get("home/swiperdata").then((res) => {
      console.log(res);
      this.setState({
        data: res,
      });
    });
    myAxios.get("home/catitems").then((res) => {
      console.log(res);
      this.setState({
        catitems: res,
      });
    });
  }
  render() {
    return (
      <div className="app-index">
        <div className="nav">
          <NavBar className="nav-con">优购商城</NavBar>
        </div>
        <div className="search">
          <Search></Search>
        </div>
        <div className="arousel">
          <Carousel autoplay={true} infinite>
            {this.state.data.map((val) => (
              <div
                onClick={this.carouselClick.bind(this,val.goods_id)}
                key={val}
                style={{
                  display: "inline-block",
                  width: "100%",
                  height: this.state.imgHeight,
                }}
              >
                <img
                  src={val.image_src}
                  alt="网络不佳"
                  style={{ width: "100%", verticalAlign: "top" }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event("resize"));
                    this.setState({ imgHeight: "auto" });
                  }}
                />
              </div>
            ))}
          </Carousel>
          <div className="catitems">
            <div className="catitems-item">
              <Flex>
                  {this.state.catitems.map(v=>{
                      return <Flex.Item key={v.image_src} onClick={this.catitemsClick}><img src={v.image_src} alt=""/></Flex.Item>
                  })}
              </Flex>
            </div>
          </div>
          {/*  */}

        </div>
        <div className="cloth">
          <Lead_list></Lead_list>
        </div>         
      </div>
    );
  }
}
export default withRouter(Index)